<template>
  <div>
    <medicalCard title="暂停接单申请列表">
      <template v-slot:head>
        <Form ref="formInline" :label-width="70" inline>
          <FormItem label="姓名">
            <Input v-model="params.name" type="text" clearable placeholder="姓名" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="params.tel" type="text" clearable placeholder="手机号" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="审核">
            <Select v-model="params.state" placeholder="审核" class="headFormItemWidth" filterable clearable>
              <Option value="1">待审核</Option>
              <Option value="2">已通过</Option>
              <Option value="3">未通过</Option>
              <Option value="4">已取消</Option>
            </Select>
          </FormItem>
          <FormItem >
            <Button icon="md-search" type="primary" class="headFormItemButton" @click="search" >搜索</Button>
            <Button icon="md-redo" class="headFormItemButton" @click="reload()" >重置</Button>
          </FormItem>
        </Form>
        <Divider style="margin-top:0px;" />
      </template>
      <template v-slot:body>
        <vxe-table border="outer" header-align="center" ref="my_table"
                   :loading="loading"
                   :data="tableData"
                   :stripe="true"
                   style="margin-top: 5px;margin-bottom: 10px"
                   :highlight-hover-row="true"
                   :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
<!--          <vxe-table-column width="60" fixed="left" type="checkbox"></vxe-table-column>-->
          <vxe-table-column fixed="left" title="头像" min-width="80">
            <template v-slot="{ row }">
              <img :src="row.head_sculpture" preview width="40px" height="40px" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" fixed="left" title="姓名" min-width="200"></vxe-table-column>
          <vxe-table-column field="tel" title="手机号" min-width="200"></vxe-table-column>
          <vxe-table-column field="start_time" title="开始时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="end_time" title="结束时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="reason" title="原因" min-width="200"></vxe-table-column>
          <vxe-table-column field="reject_reason" title="拒绝原因" min-width="200"></vxe-table-column>
          <vxe-table-column field="state" title="审核" min-width="100">
            <template v-slot="{ row }">
              <Tag color="warning" v-show="row.state === '1'">待审核</Tag>
              <Tag color="success" v-show="row.state === '2'">已通过</Tag>
              <Tag color="primary" v-show="row.state === '3'">未通过</Tag>
              <Tag color="primary" v-show="row.state === '4'">已取消</Tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="create_time" title="申请时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="careful_time" title="审核时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="cancellation_time" title="取消时间" min-width="200"></vxe-table-column>
          <vxe-table-column width="200" fixed="right" title="操作">
            <template scp-layout="true" v-slot="{ row }">
              <ButtonGroup>
                <Button type="success" icon="md-mail" v-if="row.state === '1'" style="padding: 0" @click="approve(row)"></Button>
                <Button  icon="md-close" v-if="row.state === '2'" style="padding: 0" @click="cancel(row)"></Button>
              </ButtonGroup>
            </template>
          </vxe-table-column>
        </vxe-table>
        <Row type="flex" justify="end">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
    </medicalCard>
    <Modal v-model="modal.show" draggable sticky scrollable :closable="false" :mask="false" :title="modal.title" >
      <Row >
        <Col span="22" offset="1">
          <Row>
            <Col span="24">
              <Form ref="form2" :label-width="70" label-colon >
                <Row>
                  <Col span="24">
                    <FormItem label="审核" >
                      <RadioGroup v-model="modal.data.approve" type="button" button-style="solid">
                        <Radio label="2">通过</Radio>
                        <Radio label="3">驳回</Radio>
                      </RadioGroup>
                    </FormItem>
                  </Col>
                </Row>
                <Row v-if="modal.data.approve == '3'">
                  <Col span="24">
                    <FormItem label="驳回原因">
                      <Input  v-model="modal.data.reject_reason" type="textarea" clearable placeholder="请输入驳回原因" :rows="7"  style="width: 100%;" />
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Col>
          </Row>
        </Col>
      </Row>
      <template #footer>
        <Button @click="modal.show = false">取消</Button>
        <Button type="primary" @click="approveOk()">确定</Button>
      </template>
    </Modal>
  </div>

</template>

<script>
import medicalCard from '@/view/medical-page/components/medical-card'
import {
  getMedicalAccompanyingPhysicianCeasePageList, updateAccompanyingPhysicianState23, updateAccompanyingPhysicianState4
} from '@/api/medical'
export default {
  name: 'hospital-list',
  components: {
    medicalCard
  },
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      loading: false,
      tableData: [],
      modal: {
        show: false,
        type: null,
        data: {},
        title: ''
      }
    }
  },
  computed: {
  },
  inject: [
    'reload'
  ],
  methods: {
    search () {
      this.params.pageNo = 1
      this.params.totalRecord = 0
      this.init()
    },
    init () {
      this.loading = true
      getMedicalAccompanyingPhysicianCeasePageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    approve (row) {
      this.modal.title = '审核'
      this.modal.data.id = row.id
      this.$set(this.modal.data, 'approve', '2')
      this.modal.show = true
    },
    cancel (row) {
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>取消操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          updateAccompanyingPhysicianState4({ id: row.id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    approveOk () {
      updateAccompanyingPhysicianState23(this.modal.data).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    }
  },
  watch: {
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
.headFormItemWidth{
  width: 200px;
}
.headFormItemButton{
  margin-right: 10px;
}
.formItem{
  float: right;
}
</style>
